<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/public/Header::head('快递信息')"></head>
<body>
<div th:include="include/main/mainTop.html"></div>
<div class="row main_container">
    <div class="col-sm-2 col_nav">
        <div class="accordion" id="accordionNav">
            <div class="card" v-if="user.baseInfo.position=='店长'">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-dianpu"></span>
                            快递站
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/main}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-zongti"></span>
                            总体信息
                        </a>
                        <a th:href="@{/staff}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-yuangong"></span>
                            员工管理
                        </a>
                    </div>
                </div>
            </div>

            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='财务'">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-caiwu"></span>
                            财务
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/rule}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            规则计算
                        </a>
                        <a th:href="@{/finance}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            财务
                        </a>
                    </div>
                </div>
            </div>
            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='内勤'">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-gongzuo"></span>
                            内勤
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/orderPage}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-kuaidi"></span>
                            快递信息
                        </a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-geren7"></span>
                            个人
                        </button>
                    </h2>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/job}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" v-if="user.baseInfo.position=='快递员'||user.baseInfo.position=='财务'||user.baseInfo.position=='内勤'">
                            <span class="iconfont icon-gaiicon-"></span>
                            工作信息
                        </a>
                        <a th:href="@{/account}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-zhanghao"></span>
                            账号信息
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-10 col_page" th:include="include/page/order.html"></div>
    <script>
        $(function(){
            var data4Vue = {
                uri: 'order',
                urs:'staff',
                all_beans:[],
                select_beans:[],
                show_beans:[],
                page_num:0,
                select_page_num:1,
                oid:'',
                username:'',
                phone:'',
                address:'',
                product:'',
                status:'',
                status_val:['未派送','派送中','已签收','问题件','已处理'],
                user:{baseInfo:{}},
                areas:[],
                newPack:{oid:{},status: 4}
            };

            //ViewModel
            var vue = new Vue({
                el: '.main_container',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.mountInformation();
                    this.getOrders();
                },
                methods: {
                    mountInformation:function () {
                        var url=this.urs+"/"+[[${session.user.sid}]]
                        axios.get(url).then(function(response) {
                            vue.user=response.data;
                        })
                        axios.get("areas").then(function(response) {
                            vue.areas=response.data;
                            console.log(vue.areas)
                        })
                    },
                    getOrders:function(){
                        var url=this.uri
                        axios.get(url).then(function(response) {
                            console.log(response.data);
                            vue.all_beans=response.data;
                            vue.select_beans=response.data;
                            vue.page_num=Math.ceil(vue.select_beans.length/15);
                            if(vue.select_beans.length<=15){
                                vue.show_beans=vue.select_beans;
                            }else {
                                vue.show_beans=vue.select_beans.slice(0,15);
                            }
                        })
                    },
                    changeStatus:function (oid){
                        this.newPack.oid=oid
                        axios.put("order",this.newPack).then(function (response) {
                            if(response.data.code==0){
                                alert("处理成功");
                                location.href("order")
                            }else {
                                alert("处理失败")
                            }
                        })
                    },
                    search:function (){
                        var new_beans=[];
                        if(vue.all_beans!=0){
                            for (var bean of vue.all_beans){
                                if(vue.oid!=""){
                                    if(bean.oid==vue.oid){
                                        new_beans.push(bean);
                                    }
                                }else {
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.username!=""){
                            for (var bean of vue.select_beans){
                                if(bean.username.match(vue.username)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.phone!=""){
                            for (var bean of vue.select_beans){
                                if(bean.phone.match(vue.phone)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        console.log(vue.address)
                        if(vue.select_beans.length!=0&&vue.address!=""){
                            for (var bean of vue.select_beans){
                                if(bean.area.areaName==vue.address){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.product!=""){
                            for (var bean of vue.select_beans){
                                if(bean.product.match(vue.product)){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                            new_beans=[];
                        }
                        if(vue.select_beans.length!=0&&vue.status!=""){
                            for (var bean of vue.select_beans){
                                if(vue.status==bean.status){
                                    new_beans.push(bean);
                                }
                            }
                            vue.select_beans=new_beans;
                        }
                        vue.page_num=Math.ceil(vue.select_beans.length/15);
                        vue.select_page_num=1;
                        if((vue.select_page_num*15)>=vue.select_beans.length){
                            vue.show_beans=vue.select_beans.slice(0,vue.select_beans.length);
                        }else {
                            vue.show_beans=vue.select_beans.slice(0,15);
                        }
                    },
                    jump:function (num){
                        vue.select_page_num=num;
                        if((vue.select_page_num*15)>=vue.select_beans.length){
                            vue.show_beans=vue.select_beans.slice((vue.select_page_num-1)*15,vue.select_beans.length);
                        }else {
                            vue.show_beans=vue.select_beans.slice((vue.select_page_num-1)*15,vue.select_page_num*15);
                        }
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>